<template>
  <div class="userinfo">
    <Header></Header>
    <div class="usernav">
      <el-tabs type="border-card">
        <el-tab-pane label="用户信息">
          <div class="userbody">
            <div style="width: 200px;margin-top: 1px">
              <span>头像：</span>
              <el-avatar :size="80" :src="this.$settings.base_url4+userinfo.icon"></el-avatar>
            </div>
            <div style="width: 200px;margin-top: 50px">
              <p>用户名：{{ userinfo.username }}</p>
            </div>
            <div style="width: 200px;margin-top: 50px">
              <p>手机号：{{ userinfo.mobile }}</p>
            </div>
            <div style="width: 200px;margin-top: 50px">
              <p>会员卡号：{{ cardno }}</p>
            </div>
            <div style="width: 200px;margin-top: 50px">
              <p>会员天数：{{ vip_num }}天</p>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="课程订单">
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="created_time" label="日期" width="250"></el-table-column>
            <el-table-column prop="subject" label="课程名" width="200"></el-table-column>
            <el-table-column prop="total_amount" label="价格" width="200"></el-table-column>
            <el-table-column prop="order_status" label="状态(0/1)" width="150"></el-table-column>
            <el-table-column prop="out_trade_no" label="订单号"></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="充值记录">
          <el-table :data="tableData2" stripe style="width: 100%">
            <el-table-column prop="created_time" label="日期" width="250"></el-table-column>
            <el-table-column prop="subject" label="内容" width="200"></el-table-column>
            <el-table-column prop="total_amount" label="价格" width="200"></el-table-column>
            <el-table-column prop="order_status" label="状态(0/1)" width="150"></el-table-column>
            <el-table-column prop="out_trade_no" label="订单号"></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="修改密码">
          <div class="userbody">
            <div style="width: 200px;margin-top: 50px">
              原密码：
              <el-input v-model="input1" placeholder="请输入内容"></el-input>
            </div>
            <div style="width: 200px;margin-top: 50px">
              新密码：
              <el-input v-model="input2" placeholder="请输入内容"></el-input>
            </div>
            <div style="width: 200px;margin-top: 50px">
              <el-button type="primary" @click="setpassword">修改</el-button>
            </div>

          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from "../components/Header";
import Footer from "../components/Footer";

export default {
  name: "UserInfo",
  data() {
    return {
      userinfo: [],
      input1: '',
      input2: '',
      user_id: '',
      tableData: [],
      tableData2: [],
      vip_num:0,
      cardno:'',

    }
  },
  components: {
    Header,
    Footer,
  },
  methods: {
    get_userinfo() {
      this.$http.post(`${this.$settings.base_url}user/userinfo/`, {
        username: this.$cookies.get('username')
      }).then(res => {
        this.userinfo = res.data.msg
      })
    },
    setpassword() {
      this.$http.post(`${this.$settings.base_url}user/password/`, {
        username: this.$cookies.get('username'),
        password: this.input1,
        password2: this.input2
      }).then(res => {
        if (res.data.code == 100) {
          this.$cookies.set('token', res.data.token, '7d');
          this.$message({
            message: res.data.msg,
            type: "success",
            duration: 1000,
          })
        } else {
          this.$message({
            message: res.data.msg,
            type: "warning",
            duration: 1000,
          })
        }
      })
    },
    get_user_id() {
      this.$http.post(`${this.$settings.base_url}user/userinfo/`, {
        username: this.$cookies.get('username')
      }).then(res => {
        this.user_id = res.data.msg['id'];
        this.$http.post(`${this.$settings.base_url}order/courseorder/`, {
          user: this.user_id
        }).then(res => {
          this.tableData = res.data.msg
          this.$http.post(`${this.$settings.base_url}order/vipcardorder/`, {
            user: this.user_id
          }).then(res2 => {
            this.tableData2 = res2.data.msg
          })
        })
      })
    },
  },
  created() {
    this.get_userinfo();
    this.get_user_id();
    this.$http.get(`${this.$settings.base_url}vip/vipuser/?username=`+ this.$cookies.get('username'), {
    headers:{Authorization: 'jwt ' + this.$cookies.get('token')}
      }).then(res2 => {
        this.vip_num = res2.data[0]['daynum']
        this.cardno=res2.data[0]['cardno']
      })

  },
}
</script>

<style scoped>
.usernav {
  width: 1200px;
  margin: 0 auto;
}

.userbody {
  /*margin: 0 auto;*/
  margin-left: 480px;
  margin-top: 120px;
  width: 300px;
  height: 431px;
}
</style>